<template>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="旧密码" prop="oldPassword">
        <el-input v-model="form.oldPassword" placeholder="请输入旧密码" type="password" show-password />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="form.newPassword" placeholder="请输入新密码" type="password" show-password />
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input v-model="form.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="submit" :loading="loading">保存</el-button>
        <el-button type="danger" size="mini" @click="close">关闭</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script>
  import { updateUserPwd } from "@/api/system/user";
  
  export default {
    data() {
      const equalToPassword = (rule, value, callback) => {
        if (this.form.newPassword !== value) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      };
      return {
        form: {
          oldPassword: '',
          newPassword: '',
          confirmPassword: ''
        },
        loading: false,
        // 表单校验
        rules: {
          oldPassword: [
            { required: true, message: "旧密码不能为空", trigger: "blur" }
          ],
          newPassword: [
            { required: true, message: "新密码不能为空", trigger: "blur" },
            { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
          ],
          confirmPassword: [
            { required: true, message: "确认密码不能为空", trigger: "blur" },
            { validator: equalToPassword, trigger: "blur" }
          ]
        }
      };
    },
    methods: {
      submit() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.loading = true;
            updateUserPwd(this.form.oldPassword, this.form.newPassword).then(() => {
              this.$modal.msgSuccess("修改成功，请重新登录");
              // 修改成功后强制用户重新登录
              setTimeout(() => { // 延迟执行登出，确保消息提示可见
                   this.$store.dispatch('LogOut').then(() => {
                     location.href = '/index'; // 或跳转到登录页
                   })
              }, 1500);
            }).catch(() => {
                // 密码错误等情况处理
                // 可以在这里清空输入框 this.resetForm()
            }).finally(() => {
               this.loading = false;
            });
          }
        });
      },
      close() {
         this.resetForm(); // 清空表单
         // 可以添加关闭或返回逻辑
         this.$router.go(-1); // 示例：返回上一页
      },
      resetForm() {
        this.$refs.form.resetFields();
      }
    }
  };
  </script>